<script>
    import store from '@/store/index.js';
    import common from '@/common/common.js';
    export default {
        onLaunch: function (options) {
            let info = uni.getSystemInfoSync(); // 获取手机系统信息
            store.commit('setSystem', info);

            // #ifdef MP-WEIXIN
            uni.hideTabBar();
            let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 获取小程序胶囊的位置

            this.globalData.menuButtonObject = menuButtonInfo;
            this.globalData.menuHeight = menuButtonInfo.height;
            this.globalData.capsuleWidth = menuButtonInfo.width;
            this.globalData.winwidth = info.windowWidth; // 当前屏幕的宽度
            this.globalData.statusBarHeight = info.statusBarHeight; // 获取小程序头部状态栏的高度
            this.globalData.windowWidth = menuButtonInfo.left ? menuButtonInfo.left : 281; // 获取除了胶囊的宽度的剩余宽度
            this.globalData.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight);
            this.globalData.navHeight = this.globalData.navBarHeight;
            // #endif
            let navInfo = {
                navWidth: this.globalData.windowWidth ? this.globalData.windowWidth : 281,
                navHeight: this.globalData.navBarHeight ? this.globalData.navBarHeight : 40,
                totalHeight: this.globalData.navBarHeight + info.statusBarHeight
            };
            store.commit('getNav', navInfo);
            store.commit('setLaunch', { launch: true, openAds: true });
            if (store.state.showPrompt) store.commit('setPrompt', false);

            common.restart(options);
        },
        onShow: function () {
            if (!store.state.launch) store.commit('setPrompt', true);
            // 首页全局音频悬浮窗
            if (!store.state.launch && store.state.audioConfig) store.commit('setAudio', store.state.audioConfig);
        },
        onHide: function () {
            if (store.state.audioComp) store.commit('setAudio', null);
        },
        globalData: {
            color: '#ff4b4e',
            color_aid: '',
            statusBarHeight: 0,
            windowWidth: 0,
            navBarHeight: 40,
            navHeight: 40,
            winwidth: 375,
            windowHeight: 0,
            capsuleWidth: 87,
            menuHeight: 32,
            menuButtonObject: '',
            bgAudioManager: uni.getBackgroundAudioManager()
        }
    };
</script>

<style lang="scss">
    @import url('/static/css/common.css');
    @import url('/static/css/kite.css');
    @import url('/static/css/main.css');
    @import 'uview-ui/index.scss';
    image {
        width: 100%;
        height: 100%;
    }
    .page {
        background-color: #ffffff;
        min-height: 100vh;
        padding-top: var(--height);
    }
    view,
    text,
    input {
        font-size: 24rpx;
    }

    .icon-xingxing1,
    .icon-xingxing {
        color: $uni-color-star !important;
    }
    .boxshow {
        box-shadow: 0 0rpx 20rpx #efefef;
    }
    .thmeColor {
        color: var(--color) !important;
    }
    .thmeBg {
        background: var(--color) !important;
    }
    .thmeBorder {
        border: 2upx solid var(--color) !important;
    }
    .thmeBorderBottom {
        border-bottom: 4upx solid var(--color) !important;
    }
    // 渐变背景色
    .toTop {
        background: linear-gradient(to top, var(--color), var(--color));
    }
    .toRight {
        background: linear-gradient(to right, var(--color), var(--color_aid));
    }
    .toLeft {
        background: linear-gradient(to left, var(--color), var(--color_aid));
    }
    .toRightto {
        background: linear-gradient(to right, var(--color_aid), var(--color), var(--color_aid));
    }
    .to45deg {
        background: linear-gradient(45deg, var(--color_aid), var(--color));
    }

    .icon-z {
        border-left: 4upx solid var(--color);
        border-bottom: 4upx solid var(--color);
    }

    .Rebate .tri {
        border-top-color: var(--color) !important;
    }

    .signColor,
    .lastSign {
        &::before {
            background-color: var(--color);
        }
    }
    .copyright {
        text-align: center;
        color: #666666;
        padding: 30rpx $uni-page-space;
        view {
            margin-top: 30rpx;
            font-size: 20rpx;
        }
        text {
            padding: 0 $uni-page-space;
            position: relative;
            flex: 1;
            font-size: 24rpx;
            &::before {
                content: '';
                position: absolute;
                width: 2rpx;
                height: 20rpx;
                background-color: #dddddd;
                left: 100%;
                top: 50%;
                margin-top: -10rpx;
            }
            &:nth-last-of-type(1)::before {
                display: none;
            }
        }
    }
    // 特价 团购标签
    .speTag {
        border-radius: 4rpx;
        color: white;
        font-size: 20rpx;
        padding: 2rpx 8rpx;
        background-color: $tag-bg;
        margin-right: 4rpx;
    }

    /* 遮罩 */
    .mask {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        right: 0;
        bottom: 0;
        top: 0;
        left: 0;
        z-index: 999;
    }
    // 全局样式
    .flex-box {
        display: flex;
    }
    .flex {
        flex: 1;
    }
    .flex-between {
        justify-content: space-between;
    }
    .flex-center {
        justify-content: center;
    }
    .flex-around {
        justify-content: space-around;
    }
    .align-center {
        align-items: center;
    }
    .lines {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .lines2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .goodsTabs {
        position: relative;
        justify-content: space-around;
        height: 74rpx;
        box-shadow: 0 6rpx 8rpx 1rpx rgba(105, 105, 105, 0.1);
        background-color: white;
    }
    .goodsTabItem {
        position: relative;
        justify-content: center;
    }
    // 滚动基准线
    .fixedLine {
        height: 2rpx;
        background: white;
    }
    .MORE {
        position: relative;
    }
    .MORE::after {
        position: absolute;
        content: '+';
        color: inherit;
        font-size: 18rpx;
        top: -6px;
        line-height: normal;
    }
    .top_oper {
        top: 270rpx;
        right: -80upx;
        position: fixed;
        z-index: 30;
        /* #ifdef H5 */
        margin-top: 100rpx;
        /* #endif */
        .top_oper_item {
            width: 60rpx;
            margin: 0 0 20rpx 30rpx;
            height: 60rpx;
            display: block;
            border-radius: 50%;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .toRight {
        background: linear-gradient(to right, var(--color), var(--color_aid));
    }
    @keyframes translater {
        70% {
            transform: translateX(-130upx);
        }
        100% {
            transform: translateX(-110upx);
        }
    }
    @keyframes translater1 {
        100% {
            transform: translateX(110upx);
        }
    }
    @keyframes out {
        0% {
            right: -56upx;
            transform: rotate(-34deg);
        }
        2% {
            right: -36upx;
            transform: rotate(-43deg);
        }
        20% {
            right: -36upx;
            transform: rotate(-43deg);
        }
        40% {
            right: -56upx;
            transform: rotate(-34deg);
        }
        100% {
            right: -56upx;
            transform: rotate(-34deg);
        }
    }
    .shareBox {
        width: 98upx;
        height: 98upx;
        position: fixed;
        z-index: 100;
        /* #ifdef H5 */
        top: 142upx;
        /* #endif */
        /* #ifdef MP */
        top: 274upx;
        /* #endif */
        animation-delay: 1s;
        animation: out 10s linear infinite;
    }
    .shareAni {
        animation: translater 0.3s linear forwards;
    }
    .shareAni1 {
        animation: translater 0.3s linear forwards;
        animation-delay: 0.2s;
    }
    .hideAni {
        animation: translater1 0.3s linear forwards;
    }
    .hideAni1 {
        animation: translater1 0.3s linear forwards;
        animation-delay: 0.2s;
    }
    *,
    page,
    view,
    scroll-view {
        -webkit-overflow-scrolling: touch;
    }
    page::-webkit-scrollbar,
    view::-webkit-scrollbar {
        display: none;
    }
    uni-modal .uni-modal__btn.uni-modal__btn_primary {
        color: #ffffff !important;
        background: #ff0000;
    }
    button {
        outline: none !important;
        padding: 0 !important;
        position: relative;
    }
    button:after {
        display: none;
    }

    .uni-video-container,
    .uni-video-cover {
        background-color: unset !important;
    }

    .ftr_buy_info_goods_info .ftr_buy_info_goods_price {
        margin-top: 40rpx;
    }
    .agoods .agoods_thumb {
        overflow: hidden;
    }

    .kite-classify-names.kite-classify-active .kite-classify-box {
        border-left-color: var(--color);
    }

    .sharebox,
    .sharebox .qrImg {
        width: 600upx;
        text-align: center;
    }

    .rich-text-box {
        background-color: #ffffff;
    }

    .unread {
        position: relative;
    } //小红点
    .unread::after {
        position: absolute;
        content: attr(data-num);
        padding: 0 8rpx;
        min-height: 30rpx;
        min-width: 30rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        background-color: #e24723;
        left: 66%;
        color: white;
        font-size: 20rpx;
        top: -10rpx;
        line-height: 30rpx;
    }

    // 底线
    .DiLine {
        text-align: center;
        color: #cccccc;
        font-size: 24rpx;
        line-height: 80rpx;
    }

    .top_oper_item image {
        width: 60upx;
        height: 60upx;
    }
    .success-color {
        color: $uni-color-success;
    }
    .error-color {
        color: $uni-color-error;
    }
    .btn-contact {
        position: absolute;
        height: 100%;
        width: 100%;
        right: 0;
        top: 0;
        opacity: 0;
        z-index: 1;
    }

    // 字体图标
    .icon-xiangyouxiayiye {
        color: #999999;
    }
    .icon-wuliu {
        font-size: 36rpx;
        margin-right: 15rpx;
    }
    .icon-dianpu {
        font-size: 36rpx;
        margin-right: 15rpx;
        vertical-align: -2rpx;
    }
    .icon-guanbi {
        font-size: 60upx;
        color: white;
        display: block;
        text-align: center;
        margin-top: 20upx;
    }
    .icon-xuanzhong {
        font-size: 28rpx;
        color: white;
        margin-top: 4rpx;
    }
    .icon-tubiao09 {
        font-size: 44rpx;
    }

    .starBox .iconfont {
        width: 30rpx;
        font-size: 30rpx;
        margin: 0 2rpx;
        height: 30rpx;
    }
    .icon-conversation_icon {
        margin-top: -2rpx;
        vertical-align: -2rpx;
    }

    .myPrice::before {
        content: '￥';
        font-weight: normal;
        color: inherit;
        font-size: 24rpx;
    }
    // 规格
    .specsBox {
        height: 40upx;
        display: flex;
        align-items: center;
    }
    .specsBox .txt {
        background-color: #f9f9f9;
        font-size: 20rpx;
        color: #747474;
        border-radius: 4upx;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid #ebebeb;
        padding: 0 12rpx;
        // padding:0 40rpx 0 10rpx; 可以修改规格时用这个
    }

    // 发帖入口
    .postEnter {
        width: 88rpx;
        height: 88rpx;
        position: fixed;
        z-index: 99;
        right: 24rpx;
        bottom: 250rpx;
        border-radius: 50%;
        .editorImg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 56upx;
            height: 56upx;
        }
    }
    // 价格说明
    .price_description {
        padding: 0 20rpx 10rpx;
        > text {
            position: relative;
            display: inline-block;
            color: white;
            padding: 2rpx 8rpx;
            color: $uni-color-price;
            font-size: 22rpx;
            text-align: justify;
            .bg {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                border-radius: 4rpx;
                background-color: $uni-color-price;
                opacity: 0.25;
            }
        }
    }

    // 返回顶部
    .back_top {
        width: 80rpx;
        height: 80rpx;
        border-radius: 100px;
        background: rgba(0, 0, 0, 0.4);
        position: fixed;
        right: 24rpx;
        bottom: 150rpx;
        z-index: 30;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        .icon-xiangshang {
            color: white;
            font-size: 40rpx;
            margin-top: -4rpx;
            position: relative;
            z-index: 1;
        }
    }
    // 缺省页
    .emptyPage {
        width: 100%;
        image {
            width: 50%;
            display: block;
            margin: 0 auto;
            height: 185rpx;
        }
        .emptyText {
            text-align: center;
            line-height: 44rpx;
            color: #999999;
            font-size: 28rpx;
            padding-top: 40rpx;
        }
    }

    // 瀑布流
    .my-box {
        width: 100%;
        display: flex;
        .left-box {
            width: calc(50% - 10rpx);
            margin-right: 20rpx;
        }
        .right-box {
            width: calc(50% - 10rpx);
        }
        .my-goods-box {
            background-color: #ffffff;
            border-radius: 12rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
            position: relative;
            box-shadow: 0 0 6rpx 1px #ededed;
        }
        .goods-box-msg {
            padding: 14rpx 20rpx;
            .price_description {
                padding: 0;
                display: inline-block;
                margin-top: 8rpx;
                margin-left: -4rpx;
            }
        }
    }
    .repeatGoodsList {
        padding-bottom: 20rpx;
        .goodImg {
            width: 100%;
        }
        .hisGoodsName2 {
            margin-bottom: 2rpx;
            line-height: 34rpx;
            font-size: 28rpx;
            max-height: 68rpx;
        }
        .color333 {
            color: #333333;
            padding: 0;
            font-size: 26rpx;
            .bg {
                display: none;
            }
        }
        .prices {
            margin-top: 10rpx;
            .priceNow {
                margin-right: 10rpx;
                .price {
                    font-size: 32rpx;
                    color: $uni-color-price;
                }
            }
            .priceReg {
                color: #999;
                text-decoration: line-through;
                display: inline-block;
                .price {
                    color: #999;
                    text-decoration: line-through;
                }
            }
            .position {
                text {
                    font-size: 26rpx;
                    color: #666666;
                    margin-left: 6rpx;
                }
            }
        }
        .saled {
            margin-top: 10rpx;
            text {
                color: #888888;
                font-size: 24rpx;
                padding-right: 20rpx;
                border-right: 1px solid #dddddd;
                margin-right: 20rpx;
                line-height: 20rpx;
                &:nth-last-of-type(1) {
                    border: none;
                }
            }
        }
        .maskObtained {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12rpx;
            .icon-obtained {
                position: absolute;
                width: 80px;
                height: 80px;
                left: 50%;
                top: 50%;
                z-index: 3;
                transform: translate(-50%, -50%);
            }
        }
    }

    .youTitle {
        text-align: center;
        padding: 24rpx;
        image {
            height: 32rpx;
        }
        text {
            &:nth-of-type(1) {
                width: 24rpx;
                border-radius: 100%;
                height: 10rpx;
                background-color: red;
                transform: rotate(25deg);
            }
            &:nth-of-type(2) {
                width: 32rpx;
                border-radius: 100%;
                height: 12rpx;
                background-color: red;
                transform: rotate(40deg);
            }
            &:nth-of-type(4) {
                width: 24rpx;
                border-radius: 100%;
                height: 10rpx;
                background-color: red;
                transform: rotate(-25deg);
            }
            &:nth-of-type(3) {
                width: 32rpx;
                border-radius: 100%;
                height: 12rpx;
                background-color: red;
                transform: rotate(-40deg);
            }
        }
        view {
            font-size: 32rpx;
            font-weight: bold;
            padding: 0 30rpx;
        }
    }

    .profitTitle_ {
        margin-top: 10rpx;
        text {
            color: #ff0b03;
            font-size: 20rpx;
            border-radius: 6rpx;
            border: 1px solid #eeeeee;
            display: inline-block;
            padding: 2rpx 8rpx;
        }
    }
</style>
